﻿@page "/ComboBoxVirtualScrolling"
@inherits DemoWithResizableComponent
@inject ICountryNamesProvider CountryNamesService

<div class="demo-description" id="VirtualScrolling">
    <h2><DemoNavLink Link="ComboBox#VirtualScrolling" />ComboBox - Virtual Scrolling</h2>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2.ListRenderMode">ListRenderMode</a> property to specify how the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2#virtual-scrolling">ComboBox</a> loads the item list.
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ListRenderMode">Entire</a> - The ComboBox loads the entire item list. Use this option for small item lists where scrolling should work instantly.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ListRenderMode">Virtual</a> - The ComboBox loads visible items only. Use this option to improve performance when the list contains too many items to load simultaneously.</li>
    </ul>
    <p>
        In this demo, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2.ListRenderMode">ListRenderMode</a> property is set to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ListRenderMode">ListRenderMode.Virtual</a>.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode">
            <TitleTemplate>
                Selected item: <b>@(Value != null ? Value.CountryName : "null")</b>
            </TitleTemplate>
        </DemoToolbar>
    </div>

    <div class="card-body mw-480">
        <DxComboBox Data="@Data"
                    ListRenderMode="ListRenderMode.Virtual"
                    FilteringMode="DataGridFilteringMode.Contains"
                    TextFieldName="@nameof(Country.CountryName)"
                    @bind-Value="@Value"
                    SizeMode="SizeMode">
        </DxComboBox>
    </div>
</div>

<CodeSnippet_Editor_ComboBox_VirtualScrolling />

@code {
    IEnumerable<Country> Data { get; set; }

    protected override async Task OnInitializedAsync() {
        Data = await CountryNamesService.LoadAsync();
    }

    Country Value { get; set; }
}
